<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/morris/morris.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/select2/select2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/style.css">
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/web-buy.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>好好鲜花店-网上鲜花店十大排名,本地鲜花店配送,花店专注鲜花预定/网上送花服务</title>
</head>
<body>
	<div class="right">
		<div class="top">
			<span class="glyphicon glyphicon-home icon"></span> <span>你好，欢迎来到好好鲜花店，中国网上花店领先品牌！</span>
			<div class="top-right">
			<c:if test='${user == null}'><a href="${pageContext.request.contextPath}/pages/web-register.jsp">注册</a> | 
										<a href="${pageContext.request.contextPath}/pages/web-login.jsp">登录</a> </c:if>
			<c:if test='${user != null}'><a>欢迎你，${user.username}</a>  | <a href="${pageContext.request.contextPath}/web/index">注销</a> </c:if>
				 
			</div>
		</div>
		<div>
			<img src="${pageContext.request.contextPath}/images/top.png" class="img-responsive">
		</div>
		<div class="logo-search">
			<div class="logo">
				<a><img src="${pageContext.request.contextPath}/images/logo.png" class="img-responsive" /></a>
			</div>
		</div>
		<div class="content">
			<form id="orderForm" action="" method="post">
				<p>商品信息：</p>
				<c:forEach items="${listFlower}" var="flowers" varStatus="loop">
				<!--同时遍历两List  varStatus="loop" 第二个list[loop.count-1] -->
				<input class="ids" type="hidden" value="${flowers.id}"/>
				<div class="flower_message">
					<table>
						<tr class="row">
							<th class="col-md-2">鲜花名称：</th>
							<th class="col-md-8">${flowers.flowername}</th>
						</tr>
						<tr class="row">
							<th class="col-md-2">鲜花材料：</th>
							<th class="col-md-10">${flowers.material}</th>
						</tr>
						<tr class="row">
							<th class="col-md-2">鲜花包装：</th>
							<th class="col-md-10">${flowers.packing}</th>
						</tr>
						<tr class="row">
							<th class="col-md-2">花语：</th>
							<th class="col-md-2">${flowers.flowerlanguage}</th>
							<th class="col-md-8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
						</tr>
						<tr class="row">
							<th class="col-md-2">价格：</th>
							<th class="col-md-8">${flowers.price} X <label class="quantity">${quantityList[loop.count-1]}</label></th>
						</tr>
					
						<tr class="row">
							<th class="col-md-2">库存：</th>
							<th class="col-md-8">${flowers.total}</th>
						</tr>
					</table>
					<img class="image" src="${pageContext.request.contextPath}/images/flowers/${flowers.photo}">
				</div>
				</c:forEach>
				<p>收货信息：</p>
				<div class="message">
					<input type="hidden" name="oredernum" id="oredernum" value="${oredernum }">
					<input type="hidden" name="userId" id="userId" value="${user.id }">
					<input type="hidden" name="ordertime" id="ordertime" value="${ordertime }">
					<input type="hidden" name="paytype" id="paytype" value="0">
					<div><span>收花人姓名：</span><input type="text" name="receiver" id="receiver"></div>
					<div><span>收花人手机：</span><input type="text" name="receiverphone" id="receiverphone"></div>
					<div><span>&nbsp;&nbsp;&nbsp;&nbsp;配送地址：</span><input type="text" name="address" id="address"></div>
				</div>
				
				<div class="footer">
					<span>贺卡留言：</span><textarea rows="4" cols="50" name="message" id="message"></textarea>
				</div>
				<button type="button" class="btn btn-danger btn-lg" onclick="buy()">提交订单</button>
			</form>
		</div>
	</div>
		<div class="left">
			<img src="${pageContext.request.contextPath}/images/default_user_portrait.gif" class="img-circle">
			<c:if test='${user != null}'><a href="${pageContext.request.contextPath}/show/car?userId=${user.id}">购<br>物<br>车<br></a></c:if>
			<c:if test='${user == null}'><a href="" onclick="alert('请先登录')">购<br>物<br>车<br></a></c:if>
		</div>
</body>

<script>
$(function () { 
	$("[data-toggle='popover']").popover();
});
</script>
<script type="text/javascript">
	//自动播放
	$("#myCarousel").carousel({
		interval : 2000,
	});
</script>

<script type="text/javascript">

function buy() {
	//输入校验
	if($("#receiver").val() == ""){
		alert("请输入收花人姓名");
		$("#receiver").focus();
		return;
	}
	if($("#receiverphone").val() == ""){
		alert("请输入收花人电话");
		$("#receiverphone").focus();
		return;
	}
	if($("#address").val() == ""){
		alert("请输入配送地址");
		$("#address").focus();
		return;
	}
	if($("#message").val() == ""){
		alert("请输入贺卡留言");
		$("#message").focus();
		return;
	}
	var ids=[];
	$('.ids').each(function (i){
		var text = $(this).val();
		ids.push(text);
	});
	var quantitys=[];
	$('.quantity').each(function (i){
		var quantity = $(this).text();
		quantitys.push(quantity);
	});

	$("#orderForm").attr("action","${pageContext.request.contextPath}/buy/order?ids="+ids+"&quantitys="+quantitys);
	$("#orderForm").submit();
	
}
</script>
	<script
		src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
	<script>
		$.widget.bridge('uibutton', $.ui.button);
	</script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-slider/bootstrap-slider.js"></script>
	<script>
		$(document).ready(function() {
			// 选择框
			$(".select2").select2();

			// WYSIHTML5编辑器
			$(".textarea").wysihtml5({
				locale : 'zh-CN'
			});
		});

		// 设置激活菜单
		function setSidebarActive(tagUri) {
			var liObj = $("#" + tagUri);
			if (liObj.length > 0) {
				liObj.parent().parent().addClass("active");
				liObj.addClass("active");
			}
		}

		$(document).ready(function() {
			// 激活导航位置
			setSidebarActive("admin-index");
		});
	</script>
</html>